@using FluentBlog.Models
@model FluentBlog.ViewModels.HomeViewModel

@section HeadScripts{
    <environment include="Development">
        <script src="~/lib/clamp-js/clamp.min.js"></script>
    </environment>

    <environment exclude="Development">
        <script src="https://cdn.jsdelivr.net/npm/clamp-js@0.7.0/clamp.min.js"></script>
    </environment>
}


<!-- 显示当前选择的分类 -->
@if (Model.CurrentMeta != null)
{
    <div class="card mb-4 shadow">
        <div class="card-body">
            @{
                string pageInfo = "";
                if (Model.PageNum != 1)
                {
                    pageInfo = " - " + "第" + Model.PageNum + "页";
                }
                switch (Model.CurrentMeta.Type)
                {
                    case "category":
                        <h2 class="card-title font-weight-bold m-0">分类：@Model.CurrentMeta.Name@pageInfo</h2>
                        break;
                    case "tag":
                        <h2 class="card-title font-weight-bold m-0">标签：@Model.CurrentMeta.Name@pageInfo</h2>
                        break;
                }
                if (!string.IsNullOrEmpty(Model.CurrentMeta.Description))
                {
                    <hr/>
                    @Model.CurrentMeta.Description
                }
            }
        </div>
    </div>
}

@{
    for (int i = 0; i < Model.Archives.Count; i++)
    {
        <!--文章块-->
        <div class="card mb-4 shadow">

            <!--标题图-->
            <div class="view">
                <a asp-controller="Home" asp-action="Archive" asp-route-aid="@Model.Archives[i].Aid">
                    <img src=@Url.Content(Model.Archives[i].TitleImage) class="img-fluid card-img-top" alt="photo">
                </a>
            </div>

            <!--主体-->
            <div class="card-body">
                <!--标题-->
                <h3 class="card-title font-weight-bold m-0">
                    <a id="title" class="text-dark text-decoration-none" asp-controller="Home" asp-action="Archive" asp-route-aid="@Model.Archives[i].Aid">@Model.Archives[i].Title</a>
                    @if ((DateTime.Now - Model.Archives[i].Created).Days <= 7)
                    {
                        <span class="badge badge-success">New</span>
                    }
                </h3>

                <!--分类-->
                <div class="py-3">
                    @{
                        for (int j = 0; j < Model.Categories[i].Count; j++)
                        {
                            <span class="pl-0 pr-2 m-0">
                                <a class="btn btn-sm m-0 py-0 @Model.CategoryColors[j % 5]" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.Categories[i][j].Slug">@Model.Categories[i][j].Name</a>
                            </span>
                        }
                    }
                </div>

                <!--概要-->
                <p class="card-text archive-content d-none">
                    @Model.Archives[i].Text
                </p>
                <a class="card-link" asp-controller="Home" asp-action="Archive" asp-route-aid="@Model.Archives[i].Aid">
                    阅读全文
                    <i class="mi mi-ChevronRight"></i>
                </a>
            </div>
            <!-- 文章信息 -->
            <div class="card-footer bg-transparent d-flex justify-content-around">
                <span class="text-muted">
                    <i class="mi mi-Contact" data-toggle="tooltip" data-placement="top" title="作者"></i> @Model.Authors[i].DisplayName
                </span>
                <span class="text-muted">
                    <i class="mi mi-Calendar" data-toggle="tooltip" data-placement="top" title="发表日期"></i> @Model.Archives[i].Created.ToShortDateString()
                </span>
                <span class="text-muted">
                    <i class="mi mi-View" data-toggle="tooltip" data-placement="top" title="阅读次数"></i> @Model.Archives[i].Views
                </span>
                <span class="text-muted">
                    <i class="mi mi-Comment" data-toggle="tooltip" data-placement="top" title="评论数"></i> @Model.Archives[i].CommentsNum
                </span>
            </div>
        </div>
    }
}

<!--分页导航-->
<nav id="page-navigation">
    <ul class="pagination justify-content-center">
        <!--首页-->
        <li class="page-item shadow">
            <a class="page-link text-dark" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.CurrentMeta?.Slug" asp-route-page="">
                首页
            </a>
        </li>
        <!--前一页-->
        @if (Model.PageNum > 1)
        {
            <li class="page-item shadow">
                <a class="page-link text-dark" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.CurrentMeta?.Slug" asp-route-page="@(Model.PageNum - 1)">
                    <i class="mi mi-ChevronLeft"></i>
                </a>
            </li>
        }
        <!--数字页码页-->
        @for (int i = Model.PageNum - 2; i <= Model.PageNum + 2; i++)
        {
            if (i == Model.PageNum)
            {
                <li class="page-item shadow active">
                    <a class="page-link text-white bg-gray">@i</a>
                </li>
            }
            else if (i > 0 && i <= Model.PageCount)
            {
                <li class="page-item shadow">
                    <a class="page-link text-dark" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.CurrentMeta?.Slug" asp-route-page="@i">@i</a>
                </li>
            }
        }
        <!--后一页-->
        @if (Model.PageNum < Model.PageCount)
        {
            <li class="page-item shadow">
                <a class="page-link text-dark" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.CurrentMeta?.Slug" asp-route-page="@(Model.PageNum + 1)">
                    <i class="mi mi-ChevronRight"></i>
                </a>
            </li>
        }
        <!--尾页-->
        <li class="page-item shadow">
            <a class="page-link text-dark" asp-controller="Home" asp-action="Index" asp-route-slug="@Model.CurrentMeta?.Slug" asp-route-page="@Model.PageCount">
                尾页
            </a>
        </li>
    </ul>
</nav>

@section SecondSidebar{
    <!-- 动态栏 -->
    @if (ViewBag.Settings["FeedSwitch"] == "on")
    {
        @await Component.InvokeAsync("FeedBlock")
    }
    <!-- 热门文章 -->
    @await Component.InvokeAsync("TopArchivesBlock")
}

@section BottomScripts{
    <script type="text/javascript">
        $(function() {
            $('.archive-content').each(function() {
                $clamp(this, { clamp: '5' });
            });
            $('.archive-content').removeClass('d-none');
        });
    </script>
}